<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form>

        <a-row>
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.data_conversion_mode')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="type" placeholder="">
                <a-select-option value="default">{{ $t('m.eform.apptable.other.option_default') }}</a-select-option>
                <a-select-option value="dateTime">{{$t('m.eform.apptable.other.option_dateTime')}}</a-select-option>
                <a-select-option value="options">{{ $t('m.eform.apptable.other.option_options') }}</a-select-option>
                <a-select-option value="dictOption">{{ $t('m.eform.apptable.other.option_dictOption') }}</a-select-option>
                <a-select-option value="sqlConfig">{{ $t('m.eform.apptable.other.option_sqlConfig') }}</a-select-option>
                <a-select-option value="httpConfig">{{ $t('m.eform.apptable.other.option_httpConfig') }}</a-select-option>
                <a-select-option value="user">{{ $t('m.eform.apptable.other.option_user') }}</a-select-option>
                <a-select-option value="userCode">{{ $t('m.eform.apptable.other.option_userCode') }}</a-select-option>
                <a-select-option value="dept">{{ $t('m.eform.apptable.other.option_dept') }}</a-select-option>
                <a-select-option value="deptCode">{{ $t('m.eform.apptable.other.option_deptCode') }}</a-select-option>
                <a-select-option value="page">{{ $t('m.eform.apptable.other.option_page') }}</a-select-option>
                <a-select-option value="image" v-if="!isMobile">{{ $t('m.eform.apptable.other.option_image') }}</a-select-option>
                <a-select-option value="file" v-if="!isMobile">{{ $t('m.eform.apptable.other.option_file') }}</a-select-option>
                <a-select-option value="links" v-if="!isMobile">{{ $t('m.eform.apptable.other.option_links') }}</a-select-option>
                <a-select-option value="switch" v-if="!isMobile">{{ $t('m.eform.apptable.other.option_switch') }}</a-select-option>
                <a-select-option value="html" v-if="!isMobile">{{ $t('m.eform.apptable.other.option_html') }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row v-show="type === 'dateTime'">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.date_time_format')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="format" :placeholder="$t('m.eform.apptable.placeholder.dateTimeformat')" allowClear>
                <a-select-option value="YYYY">YYYY</a-select-option>
                <a-select-option value="YYYY-MM">YYYY-MM</a-select-option>
                <a-select-option value="YYYY-MM-DD">YYYY-MM-DD</a-select-option>
                <a-select-option value="YYYY/MM/DD">YYYY/MM/DD</a-select-option>
                <a-select-option value="YYYY-MM-DD HH">YYYY-MM-DD HH</a-select-option>
                <a-select-option value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</a-select-option>
                <a-select-option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</a-select-option>
                <a-select-option value="HH">HH</a-select-option>
                <a-select-option value="HH:mm">HH:mm</a-select-option>
                <a-select-option value="HH:mm:ss">HH:mm:ss</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type === 'options'">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.static_options')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <KChangeOption v-model="options" :group-id="groupId"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type === 'dictOption'">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.data_dictionary')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <dict-setting :dictOption="dictOption" @input="inputDict" :groupId="groupId" :canEdit="true"></dict-setting>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type === 'sqlConfig'">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.sql_configuration')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <sql-config-setting :sqlConfig="sqlConfig" @input="inputSqlConfig" :groupId="groupId"></sql-config-setting>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type === 'httpConfig'">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.service_configuration')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <http-config-setting :httpConfig="httpConfig" @input="inputHttpConfig" :groupId="groupId" :showSelect="true"></http-config-setting>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row v-show="type === 'page'">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.page_code')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <view-code-tag v-model="viewName" :placeholder="$t('m.eform.apptable.placeholder.viewName')"
                             @selectFinished="selectViewOk" :groupId="groupId"></view-code-tag>
              <span>ViewCode：{{viewCode}}</span>
              <a-divider type="vertical"/>
              <span>TableName：{{tableName}}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type === 'page'">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.storage_field')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <view-col-select v-model="keyField" :viewCode="viewCode" :placeholder="$t('m.eform.apptable.placeholder.keyField')"></view-col-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type === 'page'">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.display_field')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <view-col-select v-model="labelField" :viewCode="viewCode" :placeholder="$t('m.eform.apptable.placeholder.labelField')"></view-col-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row v-show="formatExprTypes.indexOf(type) !== -1">
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.apptable.other.formatted_expression')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formatExpr" :placeholder="$t('m.eform.apptable.placeholder.formatExpr')"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      <a-button v-if="isView" key="syncDataConfig" @click="syncDataConfig">{{ $t('m.eform.apptable.other.button_update_data')}}</a-button>
      <a-button key="submit" type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

  import KChangeOption from '../designer/packages/KChangeOption/index'
  import DictSetting from '../actAppTable/DictSetting'
  import ViewCodeTag from '../../select/tag/ViewCodeTag'
  import ViewColSelect from '../../select/tag/ViewColSelect'
  import { postAction } from '@/api/manage'
  import YchConstant from "@/api/YchConstant";
  import SqlConfigSetting from "../actAppTable/SqlConfigSetting";
  import HttpConfigSetting from "../actAppTable/HttpConfigSetting";

  export default {
    name: 'ShowConfigDialog',
    components: {
      KChangeOption,
      DictSetting,
      SqlConfigSetting,
      HttpConfigSetting,
      ViewCodeTag,
      ViewColSelect
    },
    props: {
      isTable: {
        type: Boolean,
        default: false
      },
      isView: {
        type: Boolean,
        default: false
      },
      isMobile: {
        type: Boolean,
        default: false
      },
      groupId: {
        type: String,
        required: true
      },
    },
    data () {
      return {
        title: this.$t('m.common.label.operate'),
        visible: false,
        record: {},
        type: 'default',
        format: undefined,
        options: [],
        dictOption: {},
        sqlConfig: {},
        httpConfig: {},
        viewCode: null,
        tableName: null,
        viewName: null,
        keyField: null,
        labelField: null,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
        url: {
          parseSql: YchConstant.PREFIX_EFORM + '/engine/viewEngine/parseSql',
        },
        sql: null,
        dsCode: null,
        confirmLoading: false,
        formatExpr: null,
        formatExprTypes: ["options", "dictOption", "sqlConfig", "httpConfig", "user", "userCode", "dept", "deptCode", "page", "default", "dateTime"]
      }
    },
    methods: {
      open (json, record, sql, dsCode) {
        this.record = record ? record : {}
        this.title = this.$t('m.eform.apptable.other.data_conversion_config')
        this.title += this.record.colName ? ('——' + this.$locale(this.record.colName)) : ''
        this.sql = sql
        this.dsCode = dsCode

        const model = (json && json != '') ? JSON.parse(json) : {}
        this.type = model.type || 'default'
        const options = model.options || {}

        this.initData(options)
      },
      pasteDataConfig (formJson, record) {
        this.record = record ? record : {}
        this.title = this.$t('m.eform.apptable.other.data_conversion_config')
        this.title += this.record.colName ? ('——' + this.$locale(this.record.colName)) : ''

        this.initData(formJson)

        if (this.format) {
          this.type = 'dateTime'
        } else if (this.options && this.options.length > 0) {
          this.type = 'options'
        } else if (this.dictOption.dictCode) {
          this.type = 'dictOption'
        } else if (this.sqlConfig.sqlCode) {
          this.type = 'sqlConfig'
        } else if (this.httpConfig.httpCode) {
          this.type = 'httpConfig'
        } else if (this.viewCode || this.viewName || this.keyField || this.labelField) {
          this.type = 'page'
        } else if(this.record.showType === 'user'){
          if (formJson.useCode) {
            this.type = 'userCode'
          } else {
            this.type = 'user'
          }
        } else if(this.record.showType === 'dept'){
          if (formJson.useCode) {
            this.type = 'deptCode'
          } else {
            this.type = 'dept'
          }
        } else {
          this.type = 'default'
        }
      },
      initData (options) {
        this.format = options.format || undefined
        this.options = options.options || []
        this.dictOption = options.dictOption || {}
        this.sqlConfig = options.sqlConfig || {}
        this.httpConfig = options.httpConfig || {}
        this.viewCode = options.viewCode || null
        this.tableName = options.tableName || null
        this.viewName = options.viewName || null
        this.keyField = options.keyField || null
        this.labelField = options.labelField || null
        this.formatExpr = options.formatExpr || null

        this.visible = true
      },
      handleOk () {
        if (this.type && this.type !== 'default') {
          const options = {}
          if (this.type === 'dateTime') {
            if (this.format) {
              options.format = this.format
            }
          } else if (this.type === 'options') {
            if (this.options && this.options.length > 0) {
              options.options = this.options
            }
          } else if (this.type === 'dictOption') {
            if (this.dictOption.dictCode) {
              options.dictOption = this.dictOption
            }
          } else if (this.type === 'sqlConfig') {
            if (this.sqlConfig.sqlCode) {
              options.sqlConfig = this.sqlConfig
            }
          } else if (this.type === 'httpConfig') {
            if (this.httpConfig.httpCode) {
              options.httpConfig = this.httpConfig
            }
          } else if (this.type === 'user') {

          } else if (this.type === 'userCode') {

          } else if (this.type === 'dept') {

          } else if (this.type === 'deptCode') {

          } else if (this.type === 'links') {

          } else if (this.type === 'switch') {

          }  else if (this.type === 'html') {

          } else if (this.type === 'page') {
            if (this.viewCode) {
              options.viewCode = this.viewCode
            }
            if (this.tableName) {
              options.tableName = this.tableName
            }
            if (this.viewName) {
              options.viewName = this.viewName
            }
            if (this.keyField) {
              options.keyField = this.keyField
            }
            if (this.labelField) {
              options.labelField = this.labelField
            }
          } else if (this.type === 'image') {

          } else if(this.type === 'file'){

          }
          if(this.formatExprTypes.indexOf(this.type) !== -1 && this.formatExpr){
            options.formatExpr = this.formatExpr
          }
          const model = {}
          model.type = this.type
          model.options = options
          this.$emit('selectFinished', JSON.stringify(model))
        } else if(this.formatExpr){
          const options = {}
          options.formatExpr = this.formatExpr
          const model = {}
          model.options = options
          this.$emit('selectFinished', JSON.stringify(model))
        } else {
          this.$emit('selectFinished', '')
        }
        this.visible = false
      },
      handleCancel () {
        this.visible = false
      },
      inputDict (dictOption) {
        this.dictOption = dictOption
      },
      inputSqlConfig (sqlConfig) {
        this.sqlConfig = sqlConfig
      },
      inputHttpConfig (httpConfig) {
        this.httpConfig = httpConfig
      },
      selectViewOk (selectedRowKeys, selectionRows) {
        this.viewName = selectionRows[0].viewName
        this.viewCode = selectionRows[0].viewCode
        this.tableName = selectionRows[0].tableName
      },
      syncDataConfig () {
        if (!this.sql) {
          this.messageUtil.warning(this.$t('m.eform.apptable.verify.tip_sql'))
          return
        }
        this.confirmLoading = true
        postAction(this.url.parseSql + '?dsCode=' + this.dsCode, {
          sql: this.sql
        }).then((res) => {
          if (res.success) {
            this.initTable(res.result)
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      },
      initTable (tables) {
        if (!tables) {
          this.messageUtil.warning(this.$t('m.common.tip.return_data_null'))
          return
        }
        for (let i = 0; i < tables.length; i++) {
          const table = tables[i]
          for (let j = 0; j < table.columns.length; j++) {
            const column = table.columns[j]
            if (column.colAlias === this.record.colCode) {
              const model = (column.dataConfig && column.dataConfig != '') ? JSON.parse(column.dataConfig) : {}
              this.type = model.type || 'default'
              const options = model.options || {}

              return this.initData(options)
            }
          }
        }
      }
    }
  }
</script>
